<template>
  <div :class="{ mycolor: isTrue }">
    ￥route.props.id : {{ $route.params.id }}
    <hr />
    id:{{ props.id }}
    <hr />
    <div>
      <!-- <router-link :to="{ name: 'videoorder', params: { orderid: 'a1' } }"
        >订单a1</router-link
      >
      <router-link :to="{ name: 'videoorder', params: { orderid: 'b2' } }"
        >订单b2</router-link
      >
      <router-link :to="{ name: 'videoorder', params: { orderid: 'c3' } }"
        >订单c3</router-link
      > -->
      <!-- 编程式导航 -->

      <ul>
        <li><button @click="myclick('a1')">订单1</button></li>
        <li><button @click="myclick('b2')">订单2</button></li>
        <li><button @click="myclick('c3')">订单3</button></li>
      </ul>

      <ul>
        <li><button @click="mygo(-1)">前进</button></li>
        <li><button @click="mygo(1)">后退</button></li>
      </ul>
      <router-view></router-view>

     
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useRouter} from 'vue-router'

let isTrue = ref(true);
let props = defineProps({
  id:{
    type:String,
    default:''
  }
})

let route = useRouter()
//跳转 push
let myclick = function(orderid){
  route.push({name:'videoorder',params:{orderid:orderid}});
}

//前进后退
let mygo = function(num){
  route.go(num);
}
</script>

<style scoped>
.mycolor {
  width: 200px;
  height: 200px;
  background-color: rgb(0, 255, 149);
}
</style>